<template>
  <div class="diy-field-wrapper" :class="[selected ? 'diy-widget-selected' : '']">
    <Form.Item v-bind="formItemProps" v-if="widget.formItemFlag" @click.stop="selectWidget(widget)">
      <slot></slot>
    </Form.Item>
    <div v-else @click.stop="selectWidget(widget)">
      <slot></slot>
    </div>

    <template v-if="!!designer">
      <div class="diy-field-action background-opacity" v-if="designer.selectedId === widget.id">
        <i :title="t('designer.hint.selectParentWidget')" class="diy-field-action-danger">
          <Icon icon="i-ant-design:delete-outlined" @click.stop="removeWidget" />
        </i>
      </div>

      <div class="drag-handler background-opacity" v-if="designer.selectedId === widget.id">
        <i :title="t('designer.hint.dragHandler')"><Icon icon="i-ant-design:drag-outlined" /></i>
        <i v-if="widget.props?.hidden === true"><Icon icon="i-ant-design:eye-invisible-outlined" /></i>
      </div>
    </template>
  </div>
</template>
<script lang="ts" name="input-widget" setup>
  import { ref, unref, computed, onMounted, watch, nextTick, provide, PropType } from "vue"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { Icon } from "/@/components/Icon"
  import { Form } from "ant-design-vue"
  import { isNumber } from "/@/utils/is"
  import type { Designer } from "../../type"
  const currProps = defineProps({
    widget: { type: Object, default: {} },
    // 父级组件列表
    parentList: { type: Array as PropType<any[]>, default: [] },
    // 在父级列表中索引
    indexOfParentList: { type: Number, default: null },
    designer: { type: Object as () => Designer },
  })

  const { t } = useI18n("diyForm")
  const designer = currProps.designer as Designer
  const formItemProps = computed(() => {
    if (!currProps.widget.props) {
      console.warn("props is null")
      return
    }

    const { wrapperCol, formItemLabel, formItemRequired, formItemLabelAlign, formItemLabelTooltip } = currProps.widget.props

    return {
      label: formItemLabel || currProps.widget.type,
      required: formItemRequired,
      labelAlign: formItemLabelAlign,
      tooltip: formItemLabelTooltip,
      labelCol: designer.formItemConfig.labelCol,
      wrapperCol: wrapperCol || {}
    }
  })

  const selected = computed(() => currProps.widget.id === designer?.selectedId)

  onMounted(() => {
    const { formItemLabel } = currProps.widget.props
    currProps.widget.props.formItemLabel = formItemLabel || currProps.widget.type
  })

  const selectWidget = (widget) => {
    if (!!designer) {
      designer.setSelected(widget)
    }
  }

  const removeWidget = () => {
    const { parentList, indexOfParentList } = currProps

    if (!!parentList) {
      const fieldRefName = designer.selectedWidget
      let nextSelected = null
      if (parentList.length === 1) {
        nextSelected = null
      } else if (parentList.length === 1 + indexOfParentList) {
        nextSelected = parentList[indexOfParentList - 1]
      } else {
        nextSelected = parentList[indexOfParentList + 1]
      }

      nextTick(() => {
        parentList.splice(indexOfParentList, 1)
        designer.setSelected(nextSelected)
      })
    }
  }
</script>

<style lang="less" scoped>
  .diy-widget-selected {
    outline: 2px solid @primary-color !important;
  }

  .diy-field-wrapper {
    position: relative;
    padding-right: 10px;
    .diy-field-action {
      position: absolute;
      //bottom: -24px;
      bottom: 0px;
      right: -2px;
      height: 22px;
      line-height: 22px;
      z-index: 1000;
      .diy-field-action-danger {
        color: @danger-background-color !important;
      }

      i {
        font-size: 14px;
        color: #fff;
        margin: 0 3px;
        cursor: pointer;
      }

      &:hover {
        opacity: 2;
        background: @primary-color;
      }
    }

    .drag-handler {
      position: absolute;
      top: 0;
      //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
      left: -1px;
      height: 20px;
      line-height: 20px;
      //background: $--color-primary;
      z-index: 9;

      i {
        font-size: 12px;
        font-style: normal;
        color: #fff;
        margin: 4px;
        cursor: move;
      }

      &:hover {
        //opacity: 1;
        background: @primary-color;
      }
    }
  }
</style>
